<template>
  <dv-border-box-12 :color="['#50649a', '#50649b']">
    <div id="Expendmain"></div>
  </dv-border-box-12>
</template>

<script>
import * as echarts from "echarts/core";
import { zhuti } from "@/assets/index.js";
import {
  TooltipComponent,
  GridComponent,
  DataZoomComponent,
  MarkPointComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

export default {
  name: "ExpanditureComponents",
  data() {
    return {
      Time: [],
      //各项支出
      cost1: [],
      cost2: [],
      cost3: [],
      cost4: [],
      cost5: [],
      //总支出
      all: [],
    };
  },
  methods: {
    getInfo() {
      this.$http({
        url: this.$http.adornUrl(`/chaoxing/peravgspend/listall`),
        method: "get",
      }).then((response) => {
        // console.log("学院花费," + response);
        for (let index in response.data.data) {
          let year = "";
          let yearType = response.data.data[index].yearType;
          let month = "";
          let monthType = response.data.data[index].monthType;
          if (yearType == 1) {
            year = "2023";
          } else if (yearType == 2) {
            year = "2022";
          } else {
            year = "2021";
          }
          if (monthType == 1) {
            month = "-0" + monthType;
          } else if (monthType == 2) {
            month = "-0" + monthType;
          } else if (monthType == 3) {
            month = "-0" + monthType;
          } else if (monthType == 4) {
            month = "-0" + monthType;
          } else if (monthType == 5) {
            month = "-0" + monthType;
          } else if (monthType == 6) {
            month = "-0" + monthType;
          } else if (monthType == 7) {
            month = "-0" + monthType;
          } else if (monthType == 8) {
            month = "-0" + monthType;
          } else if (monthType == 9) {
            month = "-0" + monthType;
          } else if (monthType == 10) {
            month = "-" + monthType;
          } else if (monthType == 11) {
            month = "-" + monthType;
          } else {
            month = "-" + monthType;
          }

          this.Time.push(year + month);
          this.all.push(response.data.data[index].allnumber);
          this.cost1.push(response.data.data[index].teaActivitySpend);
          this.cost2.push(response.data.data[index].machineSpend);
          this.cost3.push(response.data.data[index].manageSpend);
          this.cost4.push(response.data.data[index].extracurricularSpend);
          this.cost5.push(response.data.data[index].others);
        }
        this.$nextTick(() => {
          this.initialize();
        });
      });
    },
    initialize() {
      echarts.use([
        TooltipComponent,
        GridComponent,
        DataZoomComponent,
        MarkPointComponent,
        LineChart,
        CanvasRenderer,
        UniversalTransition,
      ]);

      var chartDom = document.getElementById("Expendmain");
      var myChart = echarts.init(chartDom, zhuti);
      var option;

      option = {
        grid: {
          left: "15%",
          right: "20px",
          top: "20%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          formatter: function (params) {
            let tooltip = params[0].name + "<br/>";
            tooltip += "总支出：" + params[0].value + "元<br/>";
            for (let i = 0; i < 5; i++) {
              let name = "";
              if (i == 0) {
                name = "教学活动";
              } else if (i == 1) {
                name = "教学设备";
              } else if (i == 2) {
                name = "教学管理";
              } else if (i == 3) {
                name = "校园活动";
              } else {
                name = "其他支出";
              }
              tooltip +=
                name + "：" + params[0].data["cost" + (i + 1)] + "元<br/>";
            }
            return tooltip;
          },
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 80,
            end: 100,
            xAxisIndex: [0, 1],
          },
          {
            type: "inside",
            realtime: true,
            start: 60,
            end: 100,
            xAxisIndex: [0, 1],
          },
        ],
        xAxis: {
          // name: "时间",
          type: "category",
          boundaryGap: false,
          data: this.Time,
          splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          // axisLabel: { show: false },
          axisLabel: {
            // interval: 0, // 强制显示所有类目
            margin: 10, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        yAxis: {
          name: "总支出/元",
          color: '#fff', // 设置标签文本颜色
          type: "value",
          // splitLine: { show: false },
          axisTick: { show: false },
          axisLine: { show: false },
          // axisLabel: { show: false },
          axisLabel: {
            // interval: 0, // 强制显示所有类目
            margin: 10, // 设置文字与坐标轴之间的间距
            textStyle: {
                color: '#fff', // 设置标签文本颜色
                // 还可以添加其他样式属性，比如 fontFamily 等
            }
          },
        },
        series: [
          {
            smooth: true,
            data: this.all,
            type: "line",
            areaStyle: {},
            markPoint: {
              data: [
                { type: "max", name: "最大值" },
                { type: "min", name: "最小值" },
              ],
            },
          },
        ],
      };

      // 将各个 cost 的数据存入 series 数据中
      option.series[0].data = this.all.map((value, index) => ({
        value: value,
        cost1: this.cost1[index],
        cost2: this.cost2[index],
        cost3: this.cost3[index],
        cost4: this.cost4[index],
        cost5: this.cost5[index],
      }));

      option && myChart.setOption(option);
    },
  },
  created() {
    this.getInfo();
  },
  mounted() {},
};
</script>

<style scoped>
#Expendmain {
  width: 100%;
  height: 100%;
  padding: 10px;

  /* background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
  border: 1px solid rgba(147, 235, 248, 0.6);
  border-bottom: 1px solid rgba(147, 235, 248, 0.35);
  border-left: 1px solid rgba(147, 235, 248, 0.35); */
  /* 盒子的内阴影 */
  /* box-shadow: 0px 0px 10px rgba(128, 217, 248, 9) inset; */
}
</style>
